<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue</title>
  <script src="./js/vue.js"></script>
</head>

<body>
  <div id="app">
    <div>我是一个标题</div>
    <ul>
      <!-- 条件渲染 -->
      <li v-if="!todos">暂无数据</li>
      <template v-else>
        <li v-for="item in todos" :key="item.id">{{item.title}}</li>
      </template>
    </ul>

  </div>

  <script src="./js/axios.js"></script>
  <script>

    // 定义全局请求的域名
    axios.defaults.baseURL = 'http://10.9.46.154:3000'
    // 全局请求的超时时长 ms
    axios.defaults.timeout = 4000

    // 拦截器  --- 响应拦截器 
    axios.interceptors.response.use(ret => {
      // console.log(ret)
      let data = ret.data.map(item => ({
        ...item,
        title: item.title.replace('下班', '等一会 == ')
      }))
      return data;
    }, err => {
      alert('网络异常,请刷新')
      return Promise.reject(err)
    });

    // 请求拦截器 
    axios.interceptors.request.use(config => {

      if(config.url!='/api/login'){
        config.headers.token = 'afjewlfjwlef;jewl'
      }

      return config;
    })

    Vue.prototype.$http = axios

    new Vue({
      el: '#app',
      data: {
        // todos它是存在服务器端
        todos: null
      },
      // 初始化时,要到远程中去取一下数据
      /* mounted() {
        axios.get('/api/todos').then(ret => {
          this.todos = ret.data
        })
      } */
      /*  async mounted() {
         let ret = await axios.get('/api/todos')
         this.todos = ret.data
       } */

      /* async mounted() {
        // get参数
        let getobj = { id: 1, name: 'lisi' }
        let ret = await axios.get('/api/todos', {
          params: getobj
        })
        this.todos = ret.data
      } */

      /* async mounted() {
        // get参数
        let getobj = { id: 1, name: 'lisi' }
        let ret = await axios.get('/api/todos', {
          params: getobj
        })
        this.todos = ret
      } */

      async mounted() {
        // get参数
        let getobj = { id: 1, name: 'lisi' }
        let ret = await this.$http.get('/api/todos', {
          params: getobj
        })
        this.todos = ret
      }



    })
  </script>
</body>

</html>